<template>
  <!-- 底部tab菜单组件 -->
  <view class="tab-bar" :style="{ paddingBottom: safeAreaInsets + 'px' }">
    <view 
      class="tabs-item"
      :class="{ 'active': current === index }"
      v-for="(item,index) in tabsItem" 
      :key="index"
      @click="switchTab(index)"
    >
      <uni-icons size="26" 
        :type="current === index ? item.selectedIconPath : item.iconPath" 
        :color="current ===index ? selectedColor : color" >
      </uni-icons>
        <text class="text" style="{ color: current === index ? selectedColor : color}"> {{item.text}} </text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  current: {  // 当前页
    type: Number,
    default: 0
  },
  tabsItem: {  // tab数据配置
    type: Array,
    default: []
  }
})

// 安全区域适配（兼容全面屏）-- 获取底部安全区域高度，避免内容被遮挡。
const safeAreaInsets = uni.getSystemInfoSync().safeAreaInsets.bottom

const color = ref('#666')  // 未选中颜色
const selectedColor = ref('#FF2442') // 选中颜色

const emit = defineEmits(['submit','update'])

// 切换导航
const switchTab = (index,path)=> {
  emit('switchTabNav',index)
}

</script>

<style lang="scss">
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #ffffff;
  // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);   #f5f5f5a1
  z-index: 999;
  .tabs-item{
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 15px 0;
  }

  .text {
    font-size: 12px;
    margin-top: 2px;
  }
}
</style>